import React, { useEffect } from 'react'
import { Button, Box } from '@chakra-ui/react'
import useMouse from '../../components/useMouse'
import { useParams } from 'react-router'
import { useSearchParams } from 'react-router-dom'
export default function Event() {
  const {x, y}= useMouse()
  const params = useParams()
  const [ getParams ,setParam] = useSearchParams()   //第一个参数 getParams 获取 param 等 url  信息, 第二个参数 setParam 设置 url 等信息。
  const name = getParams.getAll('name')
  
  
  useEffect(() => {
    console.log(x, y);
    console.log('name',name)
    console.log(params);
  })
  return (
    <Box bg='tomato' w='100%' h='500px' p={4} color='white'>
      <div style={{ backgroundColor: 'blue', width: '50px', height: '50px',  position: 'absolute', left: x, top: y}}></div>
      <Button colorScheme='teal' size='xs' onClick={(() => {
        console.log('点击按钮')
        setParam({name: 'amber'})
      })}>按钮</Button>
    </Box>
  )
}
